<template>
  <div class="echartsBox" ref="echartsBox"></div>
</template>

<script>
// import "@/modules/map";
// import "echarts/map/js/china.js";
export default {
  mounted() {
    this.$nextTick(() => {
      /* 重新渲染图表 */
      // this.drawLine();
    });
  },
  data() {
    return {
      theme: this.json.theme, //主题颜色
    };
  },
  props: {
    //父组件传入的数据
    data: {
      type: Array | Object,
      default: () => [],
    },
  },
  watch: {
    data: "drawLine", // 数值变化是更新图表
  },
  methods: {
    //渲染echarts
    drawLine() {
      try {
        let that = this;
  
        let myChart = this.$echarts.init(this.$refs.echartsBox);
        var xData = []; //X轴数据
        var yData = []; //Y轴数据
        //循环赋值
        for (let i in this.data) {
          xData.push(this.data[i].name);
          yData.push(this.data[i].value);
        }
        let option = {
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            top: 10,
            left: 30,
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              fontSize: 14,
              color: "rgba(4, 162, 253, 1)",
              padding: [3, 0, 0, 0],
            },
            data: xData,
          },
          series: [
            {
              name: "",
              type: "pie",
              radius: "68%",
              center: ["50%", "50%"],
              clockwise: false,
              data: this.data,
              label: {
                normal: {
                  textStyle: {
                    color: this.json.theme.echartsBackgroundColor[0],
                    fontSize: 14,
                  },
                  // show:false,
                },
              },
              labelLine: {
                normal: {
                  show: false,
                },
              },
              itemStyle: {
                normal: {
                  borderWidth: 0,
                  borderColor: "#ffffff",
                },
                emphasis: {
                  borderWidth: 0,
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
          color: this.json.theme.echartsBackgroundColor,
          // backgroundColor: "#fff",
        };
        myChart.setOption(option);
        myChart.off("click");
        /* 点击事件 */
        myChart.on("click", (params) => {});
        /* 大小自适应 */
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      } catch (err) {
        return false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.echartsBox {
  width: 100%;
  height: 100%;
}
</style>>
